<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            text-align: center;
        }
        table{
            width: 800px;
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        td,th{
            border: 1px solid red;
            height: 35px;
        }
        tr:nth-child(odd){
            background-color: pink;
        }
        tr:hover{
            background-color: red;
        }
        .p1{
            width: 800px;
            margin: 0 auto;
            text-align: right;
        }
        .p2{
            text-align: center;
        }
        a {
            text-decoration: none;
            color: blue;
            font-weight: bold;
        }
        button {
            background-color: pink;
            box-shadow: -1px 2px 5px 1px pink;
        }
</style>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script >
        $(function () {
            $(".delete").click(function () {
                if(confirm("是否删除该分类?")){
                    $("#f1").attr("action",this.href).submit();
                    return false;
                }else{
                    return false;
                }
            });
            $("#next") .click(function () {
                if ($("#pageNo").val()<parseInt($("#total").val())) {
                    $("#pageNo").val(parseInt($("#pageNo").val()) + 1);
                }
                $("#queryForm").submit();
            })
            $("#prev") .click(function () {
                if ($("#pageNo").val()>1) {
                    $("#pageNo").val(parseInt($("#pageNo").val()) - 1);
                }
                $("#queryForm").submit();
            })
            $("#first") .click(function () {
                $("#pageNo").val(1);
                $("#queryForm").submit();
            })
            $("#last") .click(function () {
                $("#pageNo").val(parseInt($("#total").val()));
                $("#queryForm").submit();
            })
        });
    </script>
</head>
<body>
    <h1>商品分类信息表</h1>

    <form id="queryForm"  th:object="${query}" th:action="@{/item}" method="get">
        <p class="p2">
            <input type="hidden" th:field="*{pageNo}">
            <input type="hidden" th:field="*{pageSize}">
            <input type="hidden" id="total" th:value="${totalPage}">
        </p>
    </form>

    <p class="p1">
        <a th:href="@{/item/view}">新增商品分类</a>
    </p>
    <table>
        <tr>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>上级分类ID</th>
            <th>分类说明</th>
            <th>操作列表</th>
        </tr>
        <tr th:each="item:${ItemList}">
            <td th:text="${item.id}"></td>
            <td th:text="${item.name}"></td>
            <td th:text="${item.pid}"></td>
            <td th:text="${item.remark}"></td>
            <td>
                <a th:href="@{'/item/' + ${item.id} }" >修改</a>
                |
                <a class="delete" th:href="@{'/item/' + ${item.id} }" >删除</a>   <!--class="delete"-->
            </td>
        </tr>
    </table>
    <p></p>
    <div class="p2">
         <button><a id="first" href="###">首页</a>&nbsp;</button>
         <button><a id="prev" href="###">上一页</a>&nbsp;</button>  &nbsp;
         <button><a id="next" href="###">下一页</a>&nbsp;</button>
         <button><a id="last" href="###">末页</a>&nbsp;</button>
        第<span th:text="${query.pageNo}"></span>页/共<span th:text="${totalPage}"></span>页
    </div>
</body>

<form id="f1" method="post">
    <input type="hidden" name="_method" value="DELETE">
</form>
</html>